<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>CSS - 实例</title>
	<link rel="stylesheet" href="../element/static/css/element2.css">
	<script src="../element/static/js/vue.global.prod.js"></script>
	<script src="../element/static/js/element-plue2.js"></script>
	
	<script src="../element/static/js/icons-vue.js"></script>
	<link rel="stylesheet" href="../element/static/css/index.css">
</head>
<style>
.a-system{
	text-decoration: none;
}
</style>
<body>
<div id="app" class="">
	<el-container class="layout-container-body" style="height: 100%">
		<!-- 头部 -->
		<el-header style="padding: 0px 40px 0px 0px;border-bottom: 1px solid #e6e6e6;margin-bottom: 8px;">
			<div class="layout-header">
				<div class="logo">
					<span class="span-logo">Bridgee 企桥</span>
					<!-- <img src="static/image/element-logo.png" alt=""> -->
				</div>
				<div class="cut">
					<el-menu default-active="3" class="el-menu-cut" mode="horizontal" :ellipsis="false" @select="handleSelect">
						<el-menu-item index="1"><a class="a-system" href="../element/index0.html">Element-3</a></el-menu-item>
						<el-menu-item index="2"><a class="a-system" href="../echarts/echarts.html">Echarts</a></el-menu-item>
						<el-menu-item index="3"><a class="a-system" href="css.html">CSS</a></el-menu-item>
						<el-menu-item index="4"><a class="a-system" href="../antd/antd.html">Ant Design Vue</a></el-menu-item>
						
					</el-menu>
				</div>
				<div class="url"><a :href="main_url" target="_blank" style="text-decoration: none;color: #409EFF;margin-left: 12px;">单独打开</a></div>
				<div class="header-left"></div>
				<div class="toolbar">
					<el-menu :default-active="activeIndex2" class="el-menu-toolbar el-menu-cut" mode="horizontal" :ellipsis="false" @select="handleSelect2">
						<el-sub-menu index="2">
							<template #title>个人设置</template>
							<el-menu-item index="2-1">item one</el-menu-item>
							<el-menu-item index="2-2">item two</el-menu-item>
							<el-menu-item index="2-3">item three</el-menu-item>
							<el-sub-menu index="2-4">
								<template #title>item four</template>
								<el-menu-item index="2-4-1">item one</el-menu-item>
								<el-menu-item index="2-4-2">item two</el-menu-item>
								<el-menu-item index="2-4-3">item three</el-menu-item>
							</el-sub-menu>
						</el-sub-menu>
					</el-menu>
				</div>
				<div class="toolbar"><el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar></div>
				<div class="toolbar">
					<el-dropdown style="top: 3px;">
						<span class="el-dropdown-link">
							Admin <el-icon><arrow-down></arrow-down></el-icon>
						</span>
						<template #dropdown>
							<el-dropdown-menu>
								<el-dropdown-item>Action 1</el-dropdown-item>
								<el-dropdown-item>Action 2</el-dropdown-item>
								<el-dropdown-item>Action 3</el-dropdown-item>
								<el-dropdown-item disabled>Action 4</el-dropdown-item>
								<el-dropdown-item divided>Action 5</el-dropdown-item>
							</el-dropdown-menu>
						</template>
					</el-dropdown>
					&nbsp;&nbsp;&nbsp;&nbsp;
					<el-icon class="logout" title="退出系统" @click="logout_fn">
						<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-78e17ca8=""><path fill="currentColor" d="M352 159.872V230.4a352 352 0 1 0 320 0v-70.528A416.128 416.128 0 0 1 512 960a416 416 0 0 1-160-800.128z"></path><path fill="currentColor" d="M512 64q32 0 32 32v320q0 32-32 32t-32-32V96q0-32 32-32z"></path></svg>
					</el-icon>
				</div>
			</div>
		</el-header>
		
		<el-container class="body-main">
			<!-- left -->
			<el-aside width="200px" :style="styleObj">
				<el-scrollbar :style="styleObj" style="background-color: white;">
					<el-button :style="styleObj" v-html="buttonText" @click="open_close"></el-button>
					<el-menu :default-openeds="['1']" default-active="flex/base.html" :collapse="isCollapse" :collapse-transition=false>
						<el-sub-menu index="1">
							<template #title>
								<!-- <el-icon><Scale-to-original></Scale-to-original></el-icon> -->
								<span class="el-icon">&#9707;</span>
								<!-- 上面这个图标用法详见：https://www.runoob.com/charsets/ref-utf-geometric.html -->
								<span>弹性盒子</span>
							</template>
							<el-menu-item index="flex/base.html" @click="toPage">弹性盒子基本用法</el-menu-item>
							<el-menu-item index="flex/base1.html" @click="toPage">排列方式rtl</el-menu-item>
							<el-sub-menu index="1-2">
								<template #title><el-icon><Caret-right></Caret-right></el-icon> <span>flex-direction</span></template>
								<el-menu-item index="flex/base2.html" @click="toPage">row</el-menu-item>
								<el-menu-item index="flex/base2-2.html" @click="toPage">row-reverse</el-menu-item>
								<el-menu-item index="flex/base2-3.html" @click="toPage">column</el-menu-item>
								<el-menu-item index="flex/base2-4.html" @click="toPage">column-reverse</el-menu-item>
							</el-sub-menu>
							<el-sub-menu index="1-3">
								<template #title><el-icon><Caret-right></Caret-right></el-icon> <span>justify-content</span></template>
								<el-menu-item index="flex/base3.html" @click="toPage">flex-start</el-menu-item>
								<el-menu-item index="flex/base3-2.html" @click="toPage">center</el-menu-item>
								<el-menu-item index="flex/base3-3.html" @click="toPage">flex-end</el-menu-item>
								<el-menu-item index="flex/base3-4.html" @click="toPage">space-between</el-menu-item>
								<el-menu-item index="flex/base3-5.html" @click="toPage">space-around</el-menu-item>
							</el-sub-menu>
							<el-sub-menu index="1-4">
								<template #title><el-icon><Caret-right></Caret-right></el-icon> <span>align-items</span></template>
								<el-menu-item index="flex/base4.html" @click="toPage">stretch</el-menu-item>
								<el-menu-item index="flex/base4-2.html" @click="toPage">flex-start</el-menu-item>
								<el-menu-item index="flex/base4-3.html" @click="toPage">flex-end</el-menu-item>
								<el-menu-item index="flex/base4-4.html" @click="toPage">center</el-menu-item>
								<el-menu-item index="flex/base4-5.html" @click="toPage">baseline</el-menu-item>
							</el-sub-menu>
							<el-sub-menu index="1-5">
								<template #title><el-icon><Caret-right></Caret-right></el-icon> <span>flex-wrap</span></template>
								<el-menu-item index="flex/base5.html" @click="toPage">nowrap</el-menu-item>
								<el-menu-item index="flex/base5-2.html" @click="toPage">wrap</el-menu-item>
								<el-menu-item index="flex/base5-3.html" @click="toPage">wrap-reverse</el-menu-item>
							</el-sub-menu>
							<el-sub-menu index="1-6">
								<template #title><el-icon><Caret-right></Caret-right></el-icon> <span>align-content</span></template>
								<el-menu-item index="flex/base6.html" @click="toPage">stretch</el-menu-item>
								<el-menu-item index="flex/base6-2.html" @click="toPage">flex-start</el-menu-item>
								<el-menu-item index="flex/base6-3.html" @click="toPage">flex-end</el-menu-item>
								<el-menu-item index="flex/base6-4.html" @click="toPage">center</el-menu-item>
								<el-menu-item index="flex/base6-5.html" @click="toPage">space-between</el-menu-item>
								<el-menu-item index="flex/base6-6.html" @click="toPage">space-around</el-menu-item>
							</el-sub-menu>
							<el-menu-item index="flex/base7.html" @click="toPage">排序order</el-menu-item>
							<el-menu-item index="flex/base8.html" @click="toPage">对齐</el-menu-item>
							<el-menu-item index="flex/base9.html" @click="toPage">完美的居中</el-menu-item>
							<el-menu-item index="flex/base10.html" @click="toPage">align-self</el-menu-item>
							<el-menu-item index="flex/base11.html" @click="toPage">flex比例分配</el-menu-item>
							<el-sub-menu index="1-7">
								<!-- <template #title><el-icon><Caret-right></Caret-right></el-icon> <span>常用案例</span></template> -->
								<template #title><span class="el-icon">&#9673;</span> <span>常用案例</span></template>
								<el-menu-item index="flex/diy1.html" @click="toPage">横向左右分</el-menu-item>
								<el-menu-item index="flex/diy2.html" @click="toPage">移动端布局</el-menu-item>
								<el-menu-item index="flex/diy3.html" @click="toPage">统计数值</el-menu-item>
								
							</el-sub-menu>
							
						</el-sub-menu>
						
						<el-sub-menu index="2">
							<template #title>
								<!-- <el-icon><Scale-to-original></Scale-to-original></el-icon> -->
								<span class="el-icon">&#9638;</span>
								<span>网格布局</span>
							</template>
							<el-menu-item index="grid/d1.html" @click="toPage">占位法布局</el-menu-item>
							<el-menu-item index="grid/d2.html" @click="toPage">顺序填充</el-menu-item>
							<el-menu-item index="grid/d3.html" @click="toPage">块级的网格容器</el-menu-item>
							<el-menu-item index="grid/d4.html" @click="toPage">内联的网格容器</el-menu-item>
							<el-menu-item index="grid/d5.html" @click="toPage">定义列数</el-menu-item>
							<el-menu-item index="grid/d6.html" @click="toPage">定义行高</el-menu-item>
							<el-menu-item index="grid/d7.html" @click="toPage">fr单位</el-menu-item>
							<el-menu-item index="grid/d8.html" @click="toPage">网格间隙</el-menu-item>
							<el-menu-item index="grid/d9.html" @click="toPage">跨行</el-menu-item>
							<el-menu-item index="grid/d10.html" @click="toPage">跨列</el-menu-item>
							<el-menu-item index="grid/d11.html" @click="toPage">跨行又跨列</el-menu-item>
							<el-menu-item index="grid/diy1.html" @click="toPage">flex和grid布局对比</el-menu-item>
							
						</el-sub-menu>
						
						<el-sub-menu index="3">
							<template #title>
								<!-- <el-icon><Scale-to-original></Scale-to-original></el-icon> -->
								<span class="el-icon">&#9939;</span>
								<span>字符集符号</span>
							</template>
							<el-menu-item index="char/ascii.html" @click="toPage">ASCII和ANSI</el-menu-item>
							<el-menu-item index="char/latin.html" @click="toPage">拉丁字母</el-menu-item>
							<el-menu-item index="char/oooo.html" @click="toPage">变音符号</el-menu-item>
							<el-menu-item index="char/greek_coptic.html" @click="toPage">希腊字母与科普特字母</el-menu-item>
							<el-menu-item index="char/cyrillic.html" @click="toPage">西里尔字母</el-menu-item>
							<el-menu-item index="char/emoji.html" @click="toPage">Emoji彩色图标</el-menu-item>
							<el-menu-item index="char/char.html" @click="toPage">符号集</el-menu-item>
							<el-menu-item index="char/char2.html" @click="toPage">另发现符号</el-menu-item>
							
						</el-sub-menu>
						
					</el-menu>
				</el-scrollbar>
			</el-aside>

			<el-main>
				<!-- main -->
				<el-scrollbar>
					<div class="layui-body" id="iframe_div" style="bottom: 0px;">
						<iframe :src="main_url" id="iframe_body" frameborder="0" width="100%" height="100%"></iframe>
					</div>
				</el-scrollbar>
			</el-main>
		</el-container>
	</el-container>
</div>

</body>
<script>
const Main = {
	data() {
		return {
			main_url: "flex/base.html",
			isCollapse: false,
			isTrue: true,
			styleObj: {width: '200px'},
			buttonText: "收起",
			activeIndex: '1',
			activeIndex2: '1'
		}
	},
	methods: {
		toPage(ret){
			// console.log(ret);
			// console.log(ret.index);
			this.main_url = ret.index;
		},
		handleSelect(key, keyPath){
			console.log(key);
			console.log(keyPath);
		},
		handleSelect2(key, keyPath){
			console.log(key);
			console.log(keyPath);
		},
		open_close(){
			// this.isCollapse = !this.isCollapse;
			if(this.isCollapse){
				//收起的，需要展开
				this.isCollapse = false;
				this.styleObj = {width: '200px'};
				this.buttonText = "收起";
				// console.log("展开了。。。")
			}else{
				//展开的，需要收起
				this.isCollapse = true;
				this.styleObj = {width: '64px'};
				this.buttonText = "展开";
			}
			// console.log(this.isCollapse);
		},
		logout_fn(){
			alert('logout');
		},
		
	}
}

const app = Vue.createApp(Main);
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)};
app.use(ElementPlus);
let vm = app.mount("#app");
</script>
</html>
